<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style-type: none;
        }

        body {
            background-color: #f4f4f4;
        }

        .title {
            background: #fff;
            padding-left: 40px;
            line-height: 50px;
        }

        a {
            text-decoration: none;
            border-bottom: 1px solid;
            margin-right: 10px;
        }


        #app {
            display: flex;
            flex-wrap: wrap;
        }

        .box {
            background-color: #fff;
            margin: 10px;
            width: 18%;
            flex-grow: 1;
            padding: 10px;
            padid-bottom: 20px;
        }

        .box li {
            margin-top: 10px;
            flex-grow: 1;
        }

        .box .url {
            color: blue;
        }

        .fix {
            height: 0;
            margin-top: 0;
            margin-bottom: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <h3 class="title">
        <a target="_blank" href="/admin/">admin</a>
        <a target="_blank" href="/docs">接口文档</a>
    </h3>
    <div id="app">
        <div class="box" v-for="item in list">
            <ul>
                <p style="font-weight: bold;"> {{ item.name }}</p>

                <li v-for="sub_item in item.children">
                    <a target="_blank" :href="'/'+sub_item.path">
                        <span>{{ sub_item.name }}</span>
                        <span class="url">/{{ sub_item.path }}</span>
                    </a>
                </li>

            </ul>
        </div>

        <div class="box fix"></div>
        <div class="box fix"></div>
        <div class="box fix"></div>
        <div class="box fix"></div>
    </div>

    <script src="./js/axios.js"></script>
    <script src="./js/vue2.6.4.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                list: []
            },
            created() {
                this.getList()
            },

            methods: {
                getList() {
                    axios.get('/home').then(res => {
                        console.log(res.data);
                        this.list = res.data;
                    })
                }
            }
        })
    </script>

</body>

</html>